<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扫雷</title>
    <script src="../javascript/tools.js"></script>
</head>
<style>
    .gameBox {
        height: 521px;
        width: 521px;
        background-color: cadetblue;
        line-height: 0px;
        font-size: 0px;
        border: 1px solid cadetblue;
        margin: auto;
    }

    .gameBlock {
        height: 25px;
        width: 25px;
        display: inline-block;
        background-color: gray;
        margin-left: 1px;
        margin-top: 1px;
        font-size: 12px;
        color: red;
        line-height: 25px;
        text-align: center;
        float: left;
    }

    .head {
        height: 40px;
        width: 521px;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 10px;
        font-size: 0px;
        line-height: 0px;
    }

    .Start,
    .Bombs,
    .Mark,
    .Score {
        margin-right: 1%;
        height: 100%;
        width: 24%;
        display: inline-block;
        float: left;
        text-align: center;
    }

    .Score>p:first-child {
        height: 15px;
        line-height: 15px;
        font-size: 16px;
        margin: 0px;
        color: darkgreen;
        background-color: darkgray
    }

    .Score>p:last-child {
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        margin: 0px;
        background-color: black;
        color: white;

    }

    .text {
        width: 521px;
        margin: auto;
        font-size: 10px;
        color: darkgray;
    }
</style>

<body>
    <div class="container">
        <div class="head">
            <button class="Start">Start</button>
            <button class="Bombs">Bombs:<span>10</span></button>
            <button class="Mark">Test</button>
            <div class="Score">
                <p>Score</p>
                <p>0</p>
            </div>
        </div>
        <div class="text">
            <p>点击start开始计时，点击bombs设置地雷数量，点击Test切换鼠标踩雷和标记，分数是时间越短炸弹设置的越多，分数越高</p>
        </div>
        <div class="gameBox">
        </div>
    </div>
</body>
<script>
    let mapLength = 20;
    let beforeBomb = 0;
    let bomb = 10;
    let gameBox = $get('.gameBox')[0];
    let blocks = new Array();
    let markedBomb = 0;//已被标记的炸弹
    let flags = 0;//已插的旗子数
    let touchFlag = 0;//0表示点击，1表示插旗
    let openedMap = 0;//表示已被显示的地图块
    let time = 0;

    $get(".Start")[0].onclick = function () {
        if (this.flag == undefined) {//设置标记切换开始暂停
            this.flag = 0;
        }
        if (this.innerText == 'Start' && this.flag == 0 || beforeBomb != bomb) {
            beforeBomb = bomb;
            $get(".Bombs")[0].onclick = null;
            this.innerText = 'Stop';
            this.flag = 1;
            setMap();
            setBomb();
            this.score = 10 * 60 * bomb;
            $get(".Score")[0].$get('p')[1].innerText = this.score;
            this.timer = setInterval(() => {
                time++;
                let score = this.score - time * bomb;
                $get(".Score")[0].$get('p')[1].innerText = score > 0 ? score : 0;
            }, 1000);
        } else if (this.flag == 1) {
            $get(".Bombs")[0].onclick = addBombs;
            this.flag = 2;
            this.innerText = 'Start';
            clearInterval(this.timer);
            for (let i = 0; i < mapLength; i++) {
                for (let k = 0; k < mapLength; k++) {
                    blocks[i][k].onclick = null;
                    blocks[i][k].oncontextmenu = null;
                }
            }
        } else if (this.flag == 2) {
            $get(".Bombs")[0].onclick = null;
            this.innerText = 'Stop';
            this.flag = 1;
            for (let i = 0; i < mapLength; i++) {
                for (let k = 0; k < mapLength; k++) {
                    blocks[i][k].onclick = onclick;
                    blocks[i][k].oncontextmenu = rightClick;
                }
            }
            this.timer = setInterval(() => {
                time++;
                $get(".Score")[0].$get('p')[1].innerText = this.score - time * bomb;
            }, 1000);
        }

    };
    $get(".Mark")[0].onclick = function () {
        if (touchFlag == 1) {
            this.innerText = "Test";
            touchFlag = 0;
        } else if (touchFlag == 0) {
            touchFlag = 1;
            this.innerText = "Mark";

        }
    };
    $get(".Bombs")[0].onclick = addBombs;
    window.onkeydown = function (e) {
        if (e.key == 't') {
            if (touchFlag == 1) {
                touchFlag = 0;
            } else if (touchFlag == 0) {
                touchFlag = 1;
            }
        }
    }
    function rightClick(e) {
        e.preventDefault();
        // console.log(this.flag);
        if (this.flag == 1) {
            this.flag = 0;
            this.style.backgroundColor = 'gray';
            if (this.bomb) {
                markedBomb--;
            }
            flags--;
            return;
        } else {
            if (flags > bomb) {
                return;
            }
            this.flag = 1;
            this.style.backgroundColor = 'blue';
            if (this.bomb) {
                markedBomb++;
                if (markedBomb == bomb) {
                    win();
                }
            }
            flags++;
        }
        if (openedMap == mapLength * mapLength - bomb) {
            win();
        }
    }
    function setBomb() {
        for (let i = 0; i < bomb; i++) {
            let px = Math.floor(Math.random() * 20);
            let py = Math.floor(Math.random() * 20);
            if (!blocks[py][px].bomb) {
                blocks[py][px].bomb = 1;
            } else {
                i--;
            }
        }
    }
    function setMap() {
        gameBox.innerHTML = '';
        for (let i = 0; i < mapLength; i++) {
            for (let k = 0; k < mapLength; k++) {
                gameBox.innerHTML += '<div class="gameBlock"></div>'
            }
        }
        let gameBlocks = $get('.gameBlock');
        for (let i = 0; i < mapLength; i++) {
            blocks[i] = new Array();
            for (let k = 0; k < mapLength; k++) {
                blocks[i][k] = gameBlocks[i * mapLength + k];
                blocks[i][k].bomb = 0;
                blocks[i][k].flag = 0;//表示是否被插了一个旗子
                blocks[i][k].onclick = onclick;
                blocks[i][k].oncontextmenu = rightClick;
                blocks[i][k].x = k;
                blocks[i][k].y = i;

            }
        }
    }
    function onclick() {
        if (touchFlag == 0 && this.flag == 0) {
            let x;
            let y;
            x = this.x;
            y = this.y;
            if (this.bomb) {
                gameOver(x, y);
                return;
            }
            testbomb(x, y, 0);
        } else if (touchFlag == 1) {
            // console.log(this.flag);
            if (this.flag == 1) {
                this.flag = 0;
                this.style.backgroundColor = 'gray';
                if (this.bomb) {
                    markedBomb--;
                }
                flags--;
                return;
            } else {
                if (flags > bomb) {
                    return;
                }
                this.flag = 1;
                this.style.backgroundColor = 'blue';
                if (this.bomb) {
                    markedBomb++;
                    if (markedBomb == bomb) {
                        win();
                    }
                }
                flags++;
            }
        }
        if (openedMap == mapLength * mapLength - bomb) {
            win();
        }

    }
    function testbomb(x, y, deep) {//递归扫雷
        let nx = x - 1, ny = y - 1;
        if (blocks[y][x].style.backgroundColor == "darkgray") {
            return;
        }
        blocks[y][x].style.backgroundColor = "darkgray";
        openedMap++;
        blocks[y][x].onclick = null;
        blocks[y][x].oncontextmenu = function (e) {
            e.preventDefault();
        };
        let flag = 1;
        let bombs = 0;
        for (let i = ny; i < ny + 3; i++) {
            for (let k = nx; k < nx + 3; k++) {
                if (k >= 0 && k < mapLength && i >= 0 && i < mapLength) {
                    if (blocks[i][k].bomb) {
                        bombs++;
                    }
                }
            }
        }
        if (bombs == 0) {
            for (let i = ny; i < ny + 3; i++) {
                for (let k = nx; k < nx + 3; k++) {
                    if (k >= 0 && k < mapLength && i >= 0 && i < mapLength) {
                        testbomb(k, i, deep + 1)
                    } else {
                        continue;
                    }
                }
            }
        } else {
            blocks[y][x].innerText = bombs;
        }
    }
    function reset() {
        beforeBomb = 0;
        markedBomb = 0;//已被标记的炸弹
        flags = 0;//已插的旗子数
        touchFlag = 0;//0表示点击，1表示插旗
        openedMap = 0;//表示已被显示的地图块
        time = 0;
        let el = $get('.Start')[0];
        el.flag = 0;
        el.innerText = 'Start';
        clearInterval(el.timer);
        for (let i = 0; i < mapLength; i++) {
            for (let k = 0; k < mapLength; k++) {
                blocks[i][k].onclick = null;
                blocks[i][k].oncontextmenu = null;
            }
        }
        $get(".Bombs")[0].onclick = addBombs;
    }
    function win() {
        setTimeout(() => {
            $get(".Bombs")[0].onclick = addBombs;
            alert("扫雷完成");
            reset()
        }, 20);
    }
    function addBombs() {
        let num = this.$get('span')[0].innerText;
        num = new Number(num);
        if (num < 100) {
            num += 10;
        } else {
            num = 10;
        }
        this.$get('span')[0].innerText = num;
        bomb = num;
    };
    function gameOver(x, y) {
        setTimeout(() => {
            blocks[y][x].style.backgroundColor = 'red';
            for (let i = 0; i < mapLength; i++) {
                for (let k = 0; k < mapLength; k++) {
                    blocks[i][k].onclick = null;
                }
            }
            alert('BOOM 你被炸死了');
            reset()
        }, 20)
    }
</script>

</html>